<!doctpye html>
<html>
    <head>
        <title>携程实战作业</title>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link rel="stylesheet" href="./header.css">
        <link rel="stylesheet" href="./container.css">
        <link rel="stylesheet" href="./hot.css">
        <link rel="stylesheet" href="./footer.css">
        <link rel="stylesheet" href="./swiper.css">
        <link rel="stylesheet" href="https://at.alicdn.com/t/font_1546297_wzd7uv8wxqb.css">
        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  
        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">    
        <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  
        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
        <style>
        body{
            margin: 0;
        }         
        </style>
    </head>
    <body>
        <header>
             <nav>
                 <ul class="left clearfix">
                     <li><p>让旅行更幸福</p></li>
                     <li>
                        <p><em class="iconfont icon-diqiu"></em><span> Language</span><i></i></p>
                        <section class="lang">
                            <ul>
                                <li>
                                    <p><i></i><span>简体中文</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United States)</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United Kingdom)</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>简体中文</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United States)</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United Kingdom)</span></p>
                                </li>                            
                                <li>
                                    <p><i></i><span>简体中文</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United States)</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United Kingdom)</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>简体中文</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United States)</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United Kingdom)</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>简体中文</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United States)</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United Kingdom)</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>简体中文</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United States)</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United Kingdom)</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>简体中文</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United States)</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United Kingdom)</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>简体中文</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United States)</span></p>
                                </li>
                                <li>
                                    <p><i></i><span>English(United Kingdom)</span></p>
                                </li>
                            </ul>
                        </section>                        
                    </li>
                 </ul>
                 <ul class="right clearfix">
                     <li><span>您好，请登录</span></li>
                     <li><p>免费注册</p></li>
                     <li><p><i class="iconfont icon-xinfeng"></i>消息</p></li>
                     <li>
                        <p>我的携程<i></i></p>
                        <ul>
                            <li>
                                <a href="#"><span>我的收藏</span></a>
                            </li>
                            <li>
                                <a href="#"><span>我的优惠券</span></a>
                            </li>
                            <li>
                                <a href="#"><span>常用信息</span></a>
                            </li>
                            <li>
                                <a href="#"><span>我的钱包</span></a>
                            </li>
                        </ul>
                    </li>
                     <li>
                        <p>我的订单<i></i></p>
                        <ul>
                            <li><a><span>机票+相关订单</span></a></li>
                            <li><a><span>酒店订单</span></a></li>
                            <li><a><span>旅游订单</span></a></li>
                            <li><a><span>火车票订单</span></a></li>
                            <li><a><span>全部订单</span></a></li>
                            <li><a><span>手机号查订单</span></a></li>
                        </ul>
                    </li>
                     <li><p>客服中心</p></li>
                     <li>
                        <p>
                            <span>
                                <i class="iconfont icon-lvhangxiang"></i>携程商旅
                            </span>
                            <i></i>
                        </p>
                        <ul>
                            <li><a><span>商旅首页</span></a></li>
                            <li><a><span>企业客户注册</span></a></li>
                            <li><a><span>会议旅游</span></a></li>
                        </ul>
                    </li>
                     <li>
                        <i class="iconfont icon-shouji"></i>
                        <ul>
                            <li>
                                <img src="./images/app.jpg" alt="手机二维码">
                            </li>
                            <li>手机扫码快速下载<li>
                            <li>携程旅行手机版</li>
                        </ul>
                    </li>
                     <li>
                        <i class="iconfont icon-weixin"></i>
                        <ul>
                            <li>
                                <img src="./images/wechat.jpg" alt="微信二维码">
                            </li>
                            <li><p>携程订阅号：helloctrip扫一扫，<span>领旅行福利</span></p></li>
                        </ul>
                    </li>
                 </ul>
             </nav>            
        </header>
        <section class="t1">
            <section>
                <ul>
                    <li>
                        <h1><a href="#"><img src="./images/tubbiao.jpg" alt="携程图标"></a></h1>
                    </li>
                    <li>
                        <input type="text" name="search" placeholder="搜索旅行地/酒店/旅游/景点门票/交通">
                        <input type="button" name="button">
                    </li>
                </ul>
                <ul>
                    <li><span>境内：95010</span><i></i></li>
                    <li><span>（或）400-830-6666</span></li>
                    <li><span>香港（中国）：+852-3008-3295</span></li>
                    <li><span>境外：+86-21-3406-4888</span></li>
                </ul>
            </section>
        </section>
        <section class="nav">
            <ul>
                <li>
                    <p><a href="#"><span>首页</span></a></p>
                </li>
                <li>
                    <p><a href="#"><span>酒店</span></a><i></i></p>
                    <section>
                        <ul>
                            <li><p><a href="#">国内酒店</a></p></li>
                            <li><p><a href="#">海外酒店</a></p></li>
                            <li><p><a href="#">民宿客栈</a></p></li>
                            <li><p><a href="#">海外民宿</a></p></li>
                            <li><p><a href="#">团购</a></p></li>
                            <li><p><a href="#">酒店+景点</a></p></li>
                            <li><p><a href="#">团队房+长住房</a></p></li>
                            <li><p><a href="#">会议</a></p></li>
                        </ul>
                        <p><i class="iconfont icon-hebingxingzhuang"></i><a href="#">酒店订单 ></a></p>
                    </section>
                </li>
                <li>
                    <p><a href="#"><span>旅游</span></a><i></i></p>
                </li>
                <li>
                    <p><a href="#"><span>跟团游</span></a></p>
                </li>
                <li>
                    <p><a href="#"><span>自由行</span></a></p>
                </li>
                <li>
                    <p><a href="#"><span>机票</span></a><i></i></p>
                </li>
                <li>
                    <p><a href="#"><span>火车</span></a><i></i></p>
                </li>
                <li>
                    <p><a href="#"><span>汽车.船</span></a><i></i></p>
                </li>
                <li>
                    <p><a href="#"><span>用车</span></a><i></i></p>
                </li>
                <li>
                    <p><a href="#"><span>门票</span></a><i></i></p>
                </li>
                <li>
                    <p><a href="#"><span>攻略</span></a></p>
                </li>
                <li>
                    <p><a href="#"><span>全球购</span></a><i></i></p>
                </li>
                <li>
                    <p><a href="#"><span>礼品卡</span></a><i></i></p>
                </li>
                <li>
                    <p><a href="#"><span>邮轮</span></a></p>
                </li>
                <li>
                    <p><a href="#"><span>目的地</span></a></p>
                </li>
                <li>
                    <p><a href="#"><span>金融</span></a></p>
                </li>
                <li>
                    <p><a href="#"><span>更多</span></a><i></i></p>
                </li>
            </ul>
        </section>
        <section class="t2">
            <ul>
                <li><h2>境外直通车</h2></li>
                <li><i class="iconfont icon-hebingxingzhuang"></i><a href="#">海外酒店</a></li>
                <li><i class="iconfont icon-hebingxingzhuang"></i><a href="#">国际.港澳台机票</a></li>
                <li><i class="iconfont icon-hebingxingzhuang"></i><a href="#">境外租车</a></li>
                <li><i class="iconfont icon-hebingxingzhuang"></i><a href="#">国际港澳台火车票</a></li>
                <li><i class="iconfont icon-hebingxingzhuang"></i><a href="#">出境游</a></li>
                <li><i class="iconfont icon-hebingxingzhuang"></i><a href="#">高端游</a></li>
                <li><i class="iconfont icon-hebingxingzhuang"></i><a href="#">境外,港澳台门票</a></li>
                <li><i class="iconfont icon-hebingxingzhuang"></i><a href="#">签证</a></li>
                <li><i class="iconfont icon-hebingxingzhuang"></i><a href="#">保险</a></li>
                <li><i class="iconfont icon-hebingxingzhuang"></i><a href="#">WiFi,电话卡</a></li>
                <li><i class="iconfont icon-hebingxingzhuang"></i><a href="#">境外接送机</a></li>
                <li><i class="iconfont icon-hebingxingzhuang"></i><a href="#">外币兑换</a></li>
            </ul>
        </section>
        <section class="bannerForm">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                </div>                
            </div>
        </section>
        <section class="hot">
            <section class="hotnav">
                <h2>
                    <span>热门<i></i></span>
                    <span>特价旅游</span>
                    <span>出境游</span>
                    <span>境内游</span>
                    <span>周边游</span>
                    <span>邮轮</span>
                    <span>门票</span>
                    <span>当地玩乐</span>
                    <span>主题游</span>
                    <span>高端游</span>
                </h2>
                <p><a href=""><span>江门出发</span></a></p>
            </section>
            <section class="hotson">
                <section>
                    <ul class="u1">
                        <li>
                            <a href="http://www.baidu.com">精选</a>
                        </li>
                        <li>
                            <a href="#">境内</a>
                        </li>
                        <li>
                            <a href="#">日本</a>
                        </li>
                        <li>
                            <a href="#">东南亚</a>
                        </li>
                        <li>
                            <a href="#">欧洲</a>
                        </li>
                        <li>
                            <a href="#">美洲</a>
                        </li>
                        <li>
                            <a href="#">澳中东非</a>
                        </li>
                    </ul>
                    <section>
                        <ul class="u2">
                            <li>
                                <div>
                                    <div></div>
                                    <p><span>三亚</span></p>
                                    <p><sup>￥</sup><span>330</span>/人起</p>
                                    <div><p>月销520151笔</p></div>
                                </div>
                                <div>
                                    <p>三亚</p>
                                    <p>景点:亚龙湾、三亚亚特兰蒂斯水世界、蜈支洲岛、三亚亚特兰蒂斯度假区、三亚湾、海棠湾、亚龙湾热带天堂森林公园、天涯海角、南山寺、大东海</p>
                                    <p>美食:冬瓜海螺汤、和乐蟹、清补凉、椰子饭、抱罗粉、海鲜、文昌鸡、革命菜、四角豆、竹筒饭、水果炒冰、加积鸭、东山羊、椰子鸡、地瓜叶</p>
                                    <p>立即查看3000条产品></p>
                                </div>               
                            </li>
                            <li>
                                <div>
                                    <div></div>
                                    <p><span>三亚</span></p>
                                    <p><sup>￥</sup><span>330</span>/人起</p>
                                    <div><p>月销520151笔</p></div>
                                </div> 
                                <div>
                                    <p>三亚</p>
                                    <p>景点:亚龙湾、三亚亚特兰蒂斯水世界、蜈支洲岛、三亚亚特兰蒂斯度假区、三亚湾、海棠湾、亚龙湾热带天堂森林公园、天涯海角、南山寺、大东海</p>
                                    <p>美食:冬瓜海螺汤、和乐蟹、清补凉、椰子饭、抱罗粉、海鲜、文昌鸡、革命菜、四角豆、竹筒饭、水果炒冰、加积鸭、东山羊、椰子鸡、地瓜叶</p>
                                    <p>立即查看3000条产品></p>
                                </div>              
                            </li>
                            <li>
                                <div>
                                    <div></div>
                                    <p><span>三亚</span></p>
                                    <p><sup>￥</sup><span>330</span>/人起</p>
                                    <div><p>月销520151笔</p></div>
                                </div>
                                <div>
                                    <p>三亚</p>
                                    <p>景点:亚龙湾、三亚亚特兰蒂斯水世界、蜈支洲岛、三亚亚特兰蒂斯度假区、三亚湾、海棠湾、亚龙湾热带天堂森林公园、天涯海角、南山寺、大东海</p>
                                    <p>美食:冬瓜海螺汤、和乐蟹、清补凉、椰子饭、抱罗粉、海鲜、文昌鸡、革命菜、四角豆、竹筒饭、水果炒冰、加积鸭、东山羊、椰子鸡、地瓜叶</p>
                                    <p>立即查看3000条产品></p>
                                </div>               
                            </li>
                            <li>
                                <div>
                                    <div></div>
                                    <p><span>三亚</span></p>
                                    <p><sup>￥</sup><span>330</span>/人起</p>
                                    <div><p>月销520151笔</p></div>
                                </div>
                                <div>
                                    <p>三亚</p>
                                    <p>景点:亚龙湾、三亚亚特兰蒂斯水世界、蜈支洲岛、三亚亚特兰蒂斯度假区、三亚湾、海棠湾、亚龙湾热带天堂森林公园、天涯海角、南山寺、大东海</p>
                                    <p>美食:冬瓜海螺汤、和乐蟹、清补凉、椰子饭、抱罗粉、海鲜、文昌鸡、革命菜、四角豆、竹筒饭、水果炒冰、加积鸭、东山羊、椰子鸡、地瓜叶</p>
                                    <p>立即查看3000条产品></p>
                                </div>               
                            </li>
                            <li>
                                <div>
                                    <div></div>
                                    <p><span>三亚</span></p>
                                    <p><sup>￥</sup><span>330</span>/人起</p>
                                    <div><p>月销520151笔</p></div>
                                </div>
                                <div>
                                    <p>三亚</p>
                                    <p>景点:亚龙湾、三亚亚特兰蒂斯水世界、蜈支洲岛、三亚亚特兰蒂斯度假区、三亚湾、海棠湾、亚龙湾热带天堂森林公园、天涯海角、南山寺、大东海</p>
                                    <p>美食:冬瓜海螺汤、和乐蟹、清补凉、椰子饭、抱罗粉、海鲜、文昌鸡、革命菜、四角豆、竹筒饭、水果炒冰、加积鸭、东山羊、椰子鸡、地瓜叶</p>
                                    <p>立即查看3000条产品></p>
                                </div>               
                            </li>
                            <li>
                                <div>
                                    <div></div>
                                    <p><span>三亚</span></p>
                                    <p><sup>￥</sup><span>330</span>/人起</p>
                                    <div><p>月销520151笔</p></div>
                                </div>
                                <div>
                                    <p>三亚</p>
                                    <p>景点:亚龙湾、三亚亚特兰蒂斯水世界、蜈支洲岛、三亚亚特兰蒂斯度假区、三亚湾、海棠湾、亚龙湾热带天堂森林公园、天涯海角、南山寺、大东海</p>
                                    <p>美食:冬瓜海螺汤、和乐蟹、清补凉、椰子饭、抱罗粉、海鲜、文昌鸡、革命菜、四角豆、竹筒饭、水果炒冰、加积鸭、东山羊、椰子鸡、地瓜叶</p>
                                    <p>立即查看3000条产品></p>
                                </div>               
                            </li>
                            <li>
                                <div>
                                    <div></div>
                                    <p><span>三亚</span></p>
                                    <p><sup>￥</sup><span>330</span>/人起</p>
                                    <div><p>月销520151笔</p></div>
                                </div>
                                <div>
                                    <p>三亚</p>
                                    <p>景点:亚龙湾、三亚亚特兰蒂斯水世界、蜈支洲岛、三亚亚特兰蒂斯度假区、三亚湾、海棠湾、亚龙湾热带天堂森林公园、天涯海角、南山寺、大东海</p>
                                    <p>美食:冬瓜海螺汤、和乐蟹、清补凉、椰子饭、抱罗粉、海鲜、文昌鸡、革命菜、四角豆、竹筒饭、水果炒冰、加积鸭、东山羊、椰子鸡、地瓜叶</p>
                                    <p>立即查看3000条产品></p>
                                </div>               
                            </li>
                            <li>
                                <div>
                                    <div></div>
                                    <p><span>三亚</span></p>
                                    <p><sup>￥</sup><span>330</span>/人起</p>
                                    <div><p>月销520151笔</p></div>
                                </div>
                                <div>
                                    <p>三亚</p>
                                    <p>景点:亚龙湾、三亚亚特兰蒂斯水世界、蜈支洲岛、三亚亚特兰蒂斯度假区、三亚湾、海棠湾、亚龙湾热带天堂森林公园、天涯海角、南山寺、大东海</p>
                                    <p>美食:冬瓜海螺汤、和乐蟹、清补凉、椰子饭、抱罗粉、海鲜、文昌鸡、革命菜、四角豆、竹筒饭、水果炒冰、加积鸭、东山羊、椰子鸡、地瓜叶</p>
                                    <p>立即查看3000条产品></p>
                                </div>               
                            </li>
                        </ul>
                        <div><a href="http://www.taobao.com"></a></div>
                    </section>
                </section>
            </section>
        </section>
        <section class="play">
            <h2>
                <span>当地玩乐 • 出境</span>
                <span>当地玩乐 • 境内</span>
            </h2>
            <section class="container">
                <section class="hotplace">
                    <p>热门目的地</p>
                    <ul>
                        <li>普吉岛</li>
                        <li>曼谷</li>
                        <li>东京</li>
                        <li>清迈</li>
                        <li>香港</li>
                        <li>芽庄</li>
                        <li>巴厘岛</li>
                        <li>沙巴</li>
                        <li>大坂</li>
                        <li>岘港</li>
                        <li>迪拜</li>
                        <li>澳门</li>
                        <li>墨尔本</li>
                        <li>冲绳</li>
                        <li>悉尼</li>
                        <li>新加玻</li>
                        <li>暹粒</li>
                        <li>台北</li>
                    </ul>
                </section>
                <section class="product">
                    <section class="productnav">
                        <ul>
                            <li><a href="#">一日游</a></li>
                            <li><a href="">交通接驳</a></li>
                            <li><a href="">特色体验</a></li>
                            <li><a href="">演出/赛事</a></li>
                            <li><a href="">游船观光</a></li>
                            <li><a href="">SPA水疗</a></li>
                            <li><a href="">当地美食</a></li>
                        </ul>
                        <p><a href="">更多当地玩乐></a></p>
                    </section>
                    <ul>
                        <li>
                            <div>
                                <div class="img"></div>   
                            </div>
                            <div class="zi">
                                <p>【携程专线】+冲绳县万座毛+古宇利岛+冲绳美丽海水族馆一日游【多地发车赠水族馆票中文导】</p>
                                <p>
                                    <span>日本·冲绳</span>
                                    <span>
                                        <sup>￥</sup>
                                        <span>330</span>起
                                    </span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="img"></div>   
                            </div>
                            <div class="zi">
                                <p>【携程专线】+冲绳县万座毛+古宇利岛+冲绳美丽海水族馆一日游【多地发车赠水族馆票中文导】</p>
                                <p>
                                    <span>日本·冲绳</span>
                                    <span>
                                        <sup>￥</sup>
                                        <span>330</span>起
                                    </span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="img"></div>   
                            </div>
                            <div class="zi">
                                <p>【携程专线】+冲绳县万座毛+古宇利岛+冲绳美丽海水族馆一日游【多地发车赠水族馆票中文导】</p>
                                <p>
                                    <span>日本·冲绳</span>
                                    <span>
                                        <sup>￥</sup>
                                        <span>330</span>起
                                    </span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div>
                                <div class="img"></div>   
                            </div>
                            <div class="zi">
                                <p>【携程专线】+冲绳县万座毛+古宇利岛+冲绳美丽海水族馆一日游【多地发车赠水族馆票中文导】</p>
                                <p>
                                    <span>日本·冲绳</span>
                                    <span>
                                        <sup>￥</sup>
                                        <span>330</span>起
                                    </span>
                                </p>
                            </div>
                        </li>                        
                    </ul>
                </section>
            </section>
        </section>
         <footer class="clearfix">
             <section>
                <ul>
                    <li>
                        <dl>
                            <dt>为什么选择携程</dt>
                            <dd>
                                <p>放心的服务</p>                                 
                                <p>领先的服务标准 独创的保障体系</p>
                                <i class="iconfont icon-fuwu"></i>
                           </dd>
                            <dd>
                                <p>放心的价格</p>
                                <p>具竞争里的价格 无任何隐形费用</p>
                                <i class="iconfont icon-jiage"></i>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="clearfix">
                            <dt>旅游资讯</dt>
                            <dd>宾馆索引</dd>
                            <dd>宾馆索引</dd>
                            <dd>宾馆索引</dd>
                            <dd>宾馆索引</dd>
                            <dd>宾馆索引</dd>
                            <dd>火车票索引</dd>
                            <dd>宾馆索引</dd>
                            <dd>企业差旅索引</dd>
                            <dd>宾馆索引</dd>
                        </dl>
                    </li>
                    <li>
                       <dl class="clearfix">
                           <dt>合作加盟</dt>
                           <dd>宾馆索引</dd>
                           <dd>宾馆索引</dd>
                           <dd>宾馆索引</dd>
                           <dd>企业礼品卡采购</dd>
                           <dd>宾馆索引</dd>
                           <dd>火车索引</dd>
                           <dd>宾馆索引</dd>
                           <dd>目的地及景区合作</dd>
                           <dd>宾馆索引</dd>
                           <dd>更多加盟合作</dd>
                       </dl>
                   </li>
                   <li>
                       <dl class="clearfix">
                           <dt>合作加盟</dt>
                           <dd>宾馆索引</dd>
                           <dd>宾馆索引</dd>
                           <dd>宾馆索引</dd>
                           <dd>企业礼品</dd>
                           <dd>宾馆索引爱上</dd>
                           <dd>火车索引</dd>
                           <dd>宾馆索引</dd>
                           <dd>目的地及</dd>
                           <dd>宾馆索引</dd>
                           <dd>更多加盟</dd>
                           <dd>更多加盟</dd>
                           <dd>更多加盟</dd>
                       </dl>
                   </li>
                </ul>
                <p class="clearfix">微信公众号</p>
                <div>
                    <img src="./images/wechat.jpg" alt="微信">
                    <p>扫一扫领旅行福利</p>
                </div>
             </section>
             <div>
                 <p>Copyright©1999-2019ctrip.com. All rights reserved. | ICP证：沪B2-20050130</p>
                 <p><i class="iconfont icon-jinghui"></i>沪公网备31010502002731号</p>
                 <p>违法和不良信息举报电话021-22500846丨上海市旅游网站落实诚信建设主体责任承诺书</p>
                 <ul>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                     <li></li>
                 </ul>
            </div>
         </footer>       
    </body>
    <script>
        var mySwiper = new Swiper ('.swiper-container', {
            autoplay:true,
            loop : true
            
        })        
    </script>
</html>
